<!-- src/components/NavBar.vue -->
<template>
    <nav class="nav-bar">
      <ul>
        <li><a href="#">建党和大革命时期</a></li>
        <li><a href="#">土地革命战争时期</a></li>
        <li><a href="#">抗日战争时期</a></li>
        <li><a href="#">解放战争时期</a></li>
      </ul>
    </nav>
  </template>
  
  <script>
  export default {
    name: 'NavBar'
  }
  </script>
  
  <style scoped>
  .nav-bar {
    background-color: #ffcf30;
    color: white;
    padding: 10px 20px;
  }
  .nav-bar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
  }
  .nav-bar li {
    cursor: pointer;
  }
  </style>